import {Component} from "react";

class Base {
  static isNumber(aObject) {
    const regPos = /^\d+(\.\d+)?$/; //非负浮点数
    const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数

    if (regPos.test(aObject) || regNeg.test(aObject)) {
      return true;
    } else {
      return false;
    }
  }

  static getMarginPadding(margin, padding) {
    let s = {};
    if (typeof margin === "number") {
      s["margin"] = margin;
    } else if (Array.isArray(margin)) {
      switch (margin.length) {
        case 1:
          s["marginVertical"] = margin[0];
          break;
        case 2:
          s["marginVertical"] = margin[0];
          s["marginHorizontal"] = margin[1];
          break;
        case 3:
          s["marginTop"] = margin[0];
          s["marginHorizontal"] = margin[1];
          s["marginBottom"] = margin[2];
          break;
        case 4:
          s["marginTop"] = margin[0];
          s["marginRight"] = margin[1];
          s["marginBottom"] = margin[2];
          s["marginLeft"] = margin[3];
          break;
        default:
          break;
      }
    }

    if (typeof padding === "number") {
      s["padding"] = padding;
    } else if (Array.isArray(padding)) {
      switch (padding.length) {
        case 1:
          s["paddingVertical"] = padding[0];
          break;

        case 2:
          s["paddingVertical"] = padding[0];
          s["paddingHorizontal"] = padding[1];
          break;
        case 3:
          s["paddingTop"] = padding[0];
          s["paddingHorizontal"] = padding[1];
          s["paddingBottom"] = padding[2];
          break;
        case 4:
          s["paddingTop"] = padding[0];
          s["paddingRight"] = padding[1];
          s["paddingBottom"] = padding[2];
          s["paddingLeft"] = padding[3];
          break;
        default:
          break;
      }
    }

    return s;
  }

  static getColor(
    aRed,
    aGreen,
    aYellow,
    aBlue,
    aWhite,
    aGray,
    aBlack,
    aTran,
    aRand
  ) {
    let bgColor = null;
    if (aRed) {
      bgColor = "red";
    }
    if (aGreen === true) {
      bgColor = "green";
    }
    if (aYellow) {
      bgColor = "yellow";
    }
    if (aBlue) {
      bgColor = "blue";
    }
    if (aWhite) {
      bgColor = "white";
    }
    if (aGray) {
      bgColor = "gray";
    }
    if (aBlack) {
      bgColor = "black";
    }
    if (aTran) {
      bgColor = "rgba(0,0,0,0)";
    }
    if (aRand) {
      const bgAry = [
        "red",
        "green",
        "yellow",
        "blue",
        "white",
        "gray",
        "black",
      ];
      let index = Math.floor(Math.random() * bgAry.length);
      bgColor = bgAry[index];
    }
    return bgColor;
  }

  static getStyle(
    bgColor,
    aWidth,
    aHeight,
    aRow,
    aFlexWrap,
    aAbsolute,
    abackground,
    aStyle,
    aDial,
    aMargin,
    aPadding,
    aSpaceBetween,
    aSpaceAround,
    aStretch,
    aFlex,
    nohw,
  ) {
    let aWidthPx = null;
    if (aWidth) {
      if (Base.isNumber(aWidth) === true) {
        aWidthPx = aWidth;
      } else {
        aWidthPx = aWidth;
      }
    } else {
      !nohw ? aWidthPx = "100%" : aWidthPx = null;
    }

    let aHeightPx = null;
    if (aHeight) {
      if (Base.isNumber(aHeight) === true) {
        aHeightPx = aHeight;
      } else {
        aHeightPx = aHeight;
      }
    } else {
      !nohw ? aHeightPx = "100%" : aHeightPx = null;
    }

    let aFlexDirection;
    if (aRow) {
      aFlexDirection = "row";
    } else {
      aFlexDirection = "column";
    }

    const newstyle = Object.assign(
      {
        flexWrap: aFlexWrap ? "wrap" : "nowrap",
        width: aWidthPx,
        position: aAbsolute ? "absolute" : "relative",
        height: aHeightPx,
        background: abackground || bgColor || null, //"rgba(0,0,0,0)"
        flexDirection: aFlexDirection,
        flex: aFlex,
      },
      aStyle
    );

    const _dial = aDial > 0 && aDial < 10 ? aDial : 0;

    const _shorthandStyles = Base.getMarginPadding(aMargin, aPadding);
    let justifyContent, alignItems;
    if (aRow) {
      justifyContent = aSpaceBetween
        ? "space-between"
        : aSpaceAround
          ? "space-around"
          : _dial === 0
            ? null
            : _dial % 3 === 0
              ? "flex-end"
              : _dial % 3 === 2
                ? "center"
                : "flex-start";

      alignItems = aStretch
        ? "stretch"
        : _dial === 0
          ? null
          : _dial > 6
            ? "flex-end"
            : _dial > 3
              ? "center"
              : "flex-start";
    } else {
      justifyContent = aSpaceBetween
        ? "space-between"
        : aSpaceAround
          ? "space-around"
          : _dial === 0
            ? null
            : _dial > 6
              ? "flex-end"
              : _dial > 3
                ? "center"
                : "flex-start";

      alignItems = aStretch
        ? "stretch"
        : _dial === 0
          ? null
          : _dial % 3 === 0
            ? "flex-end"
            : _dial % 3 === 2
              ? "center"
              : "flex-start";
    }

    return Object.assign(
      {
        display: "flex",
        justifyContent,
        alignItems,
      },
      _shorthandStyles,
      newstyle
    );
  }
}

/**
 * h5auto 宽度会自动100% 方便dial的定位
 * row 下的宽度会自适应改变
 */
export default class Box extends Component<any, any> {
  render() {
    //(bgColor,aWidthPx,aHeightPx,aRow,aFlexWrap,aAbsolute,abackground,aStyle,aDial,
    //                     aFlex,aMargin,aPadding,aSpaceBetween,aSpaceAround,aStretch
    //                     )
    const bgColor = Base.getColor(
      this.props.red,
      this.props.green,
      this.props.yellow,
      this.props.blue,
      this.props.white,
      this.props.gray,
      this.props.black,
      this.props.tran,
      this.props.rand
    );
    let bNewStyle = Base.getStyle(
      bgColor,
      this.props.width,
      this.props.height,
      this.props.row,
      this.props.flexWrap,
      this.props.absolute,
      this.props.background,
      this.props.style,
      this.props.dial,
      this.props.margin,
      this.props.padding,
      this.props.spaceBetween,
      this.props.spaceAround,
      this.props.stretch,
      this.props.flex,
      this.props.nohw,
    );

    if (this.props.h5auto) {
      bNewStyle = {...this.props.style, flex: 1}
    }
    bNewStyle = {...this.props.style, ...bNewStyle}

    return (
      <div
        style={bNewStyle}
        onClick={this.props.onClick || null}
        id={this.props.id || null}
        className={this.props.className || null}
        class={this.props.class || null}
      >
        {this.props.children}
      </div>
    );
  }
}
